<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例_登录_提示消息</title>
    <!-- 引入bootstrap.css -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
    />
    <!-- 公共 -->
    <style>
      html,
      body {
        background-color: #edf0f5;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        width: 520px;
        height: 540px;
        background-color: #fff;
        padding: 60px;
        box-sizing: border-box;
      }

      .container h3 {
        font-weight: 900;
      }
    </style>
    <!-- 表单容器和内容 -->
    <style>
      .form_wrap {
        color: #8b929d !important;
      }

      .form-text {
        color: #8b929d !important;
      }
    </style>
    <!-- 提示框样式 -->
    <style>
      .alert {
        transition: 0.5s;
        opacity: 0;
      }

      .alert.show {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h3>欢迎-登录</h3>
      <!-- 登录结果-提示框 -->
      <div class="alert alert-success" role="alert">提示消息</div>
      <!-- 表单 -->
      <div class="form_wrap">
        <form class="login-form">
          <div class="mb-3">
            <label for="username" class="form-label">账号名</label>
            <input
              type="text"
              class="form-control username"
              id="username"
              name="username"
            />
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input
              type="password"
              class="form-control password"
              id="password"
              name="password"
            />
          </div>
          <button type="button" class="btn btn-primary btn-login">登 录</button>
        </form>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./lib/form-serialize.js"></script>

    <script>
      // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
      // 目标2：使用提示框，反馈提示消息
      // 2.1 获取提示框
      const myAlert = document.querySelector(".alert");
      /**
       * 2.2 封装提示框函数，重复调用，满足提示需求
       * 功能：
       * 1. 显示提示框
       * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
       * 3. 过2秒后，让提示框自动消失
       */
      function alertFn(msg, isSuccess) {
        // 1> 显示提示框
        myAlert.classList.add("show");

        // 2> 实现细节
        myAlert.innerText = msg;
        const bgStyle = isSuccess ? "alert-success" : "alert-danger";
        myAlert.classList.add(bgStyle);

        // 3> 过2秒隐藏
        setTimeout(() => {
          myAlert.classList.remove("show");
          // 提示：避免类名冲突，重置背景色
          myAlert.classList.remove(bgStyle);
        }, 2000);
      }

      // 1.1 登录-点击事件
      document.querySelector(".btn-login").addEventListener("click", () => {
        // 1.2 第一种获取方法：获取用户名和密码
        const username = document.querySelector(".username").value;
        const password = document.querySelector(".password").value;
        //第二种获取方法：
        //hash 设置获取数据结构  true 则获取数据是对象  false则是字符串
        //empty 设置是否获取空值
        const form = document.querySelector(".login-form");
        const data = serialize(form, { hash: true, empty: true });

        // 1.3 判断长度
        if (username.length < 8) {
          alertFn("用户名必须大于等于8位", false);
          console.log("用户名必须大于等于8位");
          return; // 阻止代码继续执行
        }
        if (password.length < 6) {
          alertFn("密码必须大于等于6位", false);
          console.log("密码必须大于等于6位");
          return; // 阻止代码继续执行
        }

        // 1.4 基于axios提交用户名和密码
        // 验证，账号密码：  itheima007   7654321
        axios({
          url: "http://hmajax.itheima.net/api/login",
          method: "POST",
          data: data,
        })
          .then((result) => {
            alertFn(result.data.message, true);
            console.log(result);
            console.log(result.data.message);
          })
          .catch((error) => {
            alertFn(error.response.data.message, false);
            console.log(error);
            console.log(error.response.data.message);
          });
      });
    </script>
  </body>
</html>
